<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改服务订单')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-serviceOrder-edit" th:object="${zsyhServiceOrder}">
            <!--<input name="id" th:field="*{id}" type="hidden">-->
            <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>工单基本信息--【<span style="color: red">[[${zsyhServiceOrder.orderStateName}]]</span>】--下单时间：【<span style="color: red">[[${#dates.format(zsyhServiceOrder.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</span>】</span></h5>
            <div style="display: flex;padding-top: 10px;">
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">工单编号：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p id="orderId" name="id" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{id}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">工单分类：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="orderTypeName" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderTypeName}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">故障类型：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="serviceTypeName" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{serviceTypeName}]]</p>
                    </div>
                </div>
            </div>
            <div style="display: flex;">
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">维修数量：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="orderNumber" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderNumber}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">是否加急：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <select id="isPriority" name="isPriority" class="form-control m-b" style="border: 0;appearance:none;background: transparent;" th:with="type=${@dict.getType('zsyh_yesno')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isPriority}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">故障说明：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="serviceTypeName" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{faultComment}]]</p>
                    </div>
                </div>
            </div>
            <div style="display: flex;">
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">固定抽成费用：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p id="orderFixdraw" name="orderFixdraw" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderFixdraw}]]</p>
                    </div>
                </div>
                <div id="cancelOrderDiv" class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">取消订单备注：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="cancelRemark" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{cancelRemark}]]</p>
                    </div>
                </div>
            </div>

            <div style="display: flex;justify-content: space-around;">
                <div style="float: left;width: 50%;">
                    <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>客户基本信息</h5>
                    <div style="display: flex;padding-top: 10px;">
                        <div class="form-group" style="width: 50%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">联系人：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="userName" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{userName}]]</p>
                            </div>
                        </div>
                        <div class="form-group" style="width: 50%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">联系电话：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="userPhone"class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{userPhone}]]</p>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div class="form-group" style="width: 100%;float: left;">
                            <label class="col-sm-3 control-label" style="width: 20%;font-weight: bolder;text-align: right;margin-left: 20px;">详细地址：</label>
                            <div class="col-sm-8" style="width: 70%">
                                <p name="userAddress" style="border-width: 0px;padding:6px 4px;" class="form-control">[[*{userAddress}]]</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="float: left;width: 50%;">
                    <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>师傅基本信息</h5>
                    <div style="display: flex;padding-top: 10px;">
                        <div class="form-group" style="width: 30%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">师傅名称：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="repairStorePerson" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{repairStorePerson}]]</p>
                            </div>
                        </div>
                        <div class="form-group" style="width: 30%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">联系电话：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="repairStorePhone"class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{repairStorePhone}]]</p>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div class="form-group" style="width: 100%;float: left;">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder"></label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="userAddress" style="border-width: 0px;padding:6px 4px;opacity:0;" class="form-control"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>完工信息</h5>
            <div style="display: flex;padding-top: 10px;">
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">完工图片：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <input type="hidden" name="orderImage" th:field="*{orderImage}">
                        <div class="file-loading">
                            <input class="form-control file-upload" id="orderImage" name="file" type="file">
                        </div>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">完工时间：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="repairTime" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{repairTime}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">维修内容：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="repairContent" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{repairContent}]]</p>
                    </div>
                </div>
            </div>

            <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>评价信息</h5>
            <div style="display: flex;padding-top: 10px;">
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">评价内容：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="orderEvaluateContent" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderEvaluateContent}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">服务评分：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="orderEvaluateScore" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderEvaluateScore}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">评价图片展示：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <input type="hidden" name="orderEvaluateImage" th:field="*{orderEvaluateImage}">
                        <div class="file-loading">
                            <input class="form-control file-upload" id="orderEvaluateImage" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "zsyh/serviceOrder";
        $("#form-serviceOrder-edit").validate({
            focusCleanup: true
        });

        $(document).ready(function () {
            if([[${zsyhServiceOrder.orderStateName}]] == '已取消'){
                $("#cancelOrderDiv").css("display","block");

            }else{
                $("#cancelOrderDiv").css("display","none");
            }
        })

        $(".file-upload").each(function (i) {
            debugger;
            var val = $("input[name='" + this.id + "']").val();
            var imageArr = val.split("|");
            $(this).fileinput({
                'uploadUrl': ctx + 'common/uploadOSS',
                initialPreviewAsData: true,
                initialPreview: imageArr,
                maxFileCount: 1,
                showRemove: false,/*是否显示移除按钮*/
                showUpload: false,/*是否显示上传按钮*/
                showBrowse: false,/*是否显示浏览按钮,选择按钮*/
                showCaption: false, /*是否显示被选文件的简介*/
                autoReplace: true,
                layoutTemplates: {
                    actionDelete:'',
                    actionUpload:''
                } /*去掉缩略图上的删除和上传按钮*/
            }).on('fileuploaded', function (event, data, previewId, index) {
                $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            })
            $(this).fileinput('_initFileActions');

        });

        $(function () {
            $('#orderState').attr("disabled",true);
            $('#isPriority').attr("disabled",true);
        })
    </script>
</body>
</html>